<template>
	<view class="bg-grey container">
		<sb-back-icon></sb-back-icon>
		<view class="bg-red pad20">
			<u-search v-model="keywords" input-align="left" disabled 
			placeholder="What are you looking for ..."
			@click="$go2('/pages/main/goods/search')"
				@custom="getGoodList" @search="getGoodList" height="70" bg-color="#FFF" :show-action="false"></u-search>
		</view>
		<view class="c_wrap padh10 bg-white">
			<view class="tabs_wrap flex j-s t-c">
				<view class="flex j-c a-c tab-item" v-for="(item, index) in tabsList" 
				:key="index"
					:class="{ isAction: current === index }" 
					@click="tabsClick(item, index)">
					{{ item.name }}
					<view v-if="item.key === 'price'" class="flex flex-col" style="margin-left: 15rpx">
						<u-icon class="font24" v-if="arrowRecord === 1 || arrowRecord === 0" name="arrow-up"
							color="#ccc"></u-icon>
						<u-icon class="font24" v-if="arrowRecord === 2 || arrowRecord === 0" name="arrow-down"
							color="#ccc">
						</u-icon>
					</view>
				</view>
			</view>
		</view>

		<view v-if="!goodsList.length" class="empty">
			<view>
				<view class="centre flex flex-col a-c j-c">
					<image src="/static/images/order/empty-search.png" mode=""></image>
					<view class="explain">
						Oh... Find Nothing
						<view class="tips">Search for something else...</view>
					</view>
					<view class="hot-tag flex mar20 font24">
						<u-tag class="marv10" v-for="(item, i) in hotList" :key="i" type="info"
							@click="selectToSearch(item.label)" shape="circle" :text="item.label" mode="plain" />
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<navigator v-for="(item, i) in goodsList" :key="i" class="marv15 bg-white" :url="`./detail?id=${item.id}`">
				<view class="flex j-s pad20">
					<sb-img w="250" :src="item.cover" shadow />
					<view class="item-info flex1 padh20 flex flex-col j-s">
						<view class="u-line-3">
							{{ item.name }}
						</view>
						<view class="u-line-2 c-d font24 marv10">
							{{ item.subTitle }}
						</view>
						<view>
							<view class="flex j-s marv10">
								<sb-price-text :price="item.price" />
								<u-icon name="shopping-cart" size="35"></u-icon>
							</view>
							<view class="c-d"> Sale Count：{{ item.virtualSaleCount }} </view>
						</view>
					</view>
				</view>
			</navigator>
		</view>
		<my-popup ref="screen_modal" mode="right">
			<view class="popup_wrap" style="width: 80vw">
				<u-collapse :accordion="false" :head-style="headstyle">
					<u-collapse-item :open="item.open" :title="item.head" v-for="(item, index) in itemList"
						:key="index">
						<view class="font10 flex t-c j-s-c">
							<view v-show="index === 2" class="flex j-s" style="width: 80vw">
								<u-input @focus="keyBshow = true" class="u_input_bc" v-model="value1" />
								<view style="line-height: 4.5vh" class="marh10">——</view>
								<u-input @focus="keyBshow2 = true" class="u_input_bc" v-model="value2" />
							</view>
							<u-keyboard @change="valChange" @backspace="backspace" :mask="false" ref="uKeyboard"
								mode="number" v-model="keyBshow" :mask-close-able="false"></u-keyboard>
							<u-keyboard @change="valChange2" @backspace="backspace2" :mask="false" ref="uKeyboard"
								mode="number" v-model="keyBshow2" :mask-close-able="false"></u-keyboard>
							<view class="sub_item" v-for="(subItem, i) in item.body" :key="i">{{ subItem }}</view>
						</view>
					</u-collapse-item>
					<view class="btn_wrap flex j-s">
						<u-button @click="reset">Reset</u-button>
						<u-button @click="submit" type="error">Confirm</u-button>
					</view>
				</u-collapse>
			</view>
		</my-popup>

		<view>
			<u-toast ref="uToast" />
		</view>
		<!-- <u-tabs ref="uTabs" :list="tabs" :current="current" :is-scroll="false" /> -->
		<!-- <view class="flex j-s pad15"> -->
		<!-- 跳转在详情页中，然后再进行传参 -->
		<!-- <navigator class="marv15 bg-white" style="width: 345rpx;" v-for="item in goodsList" :key='item.id'
				:url="`./detail?id=${item.id}`">
				<view class="relative">
					<u-image :src="item.cover" width='345rpx' height='345rpx' border-radius="10rpx" />
					<view class="absolute"
						style="bottom: 0; background: linear-gradient( transparent 1%, rgba(0,0,0,0.7)); width: 100%; padding: 5px; color: #fff;">
						{{item.virtualSaleCount}}件已出售
					</view>
				</view>
				<view class="flex marv20 font30 padh10 u-line-2">
					{{item.name}}
				</view>
				<view class="flex pad10">
					<sb-price-text class="padv5" :price='item.minPrice' sub :oldPrice="item.originalPrice" />
				</view>
			</navigator>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//popup
				value1: "",
				value2: "",
				keyBshow: false,
				keyBshow2: false,
				hotList: [],
				headstyle: {
					fontSize: "12px",
				},
				itemList: [{
						head: "服务/折扣",
						body: [
							"京东物流",
							"211限时达",
							"仅看有货",
							"货到付款",
							"京东国际",
							"促销",
							"配送全球",
							"放心购",
						],
						open: true,
						disabled: true,
					},
					{
						head: "快递",
						body: ["京东物流"],
						open: true,
					},
					{
						head: "价格区间",
						body: ["200-600", "600-1000", "1000-1800"],
						open: true,
					},
				],
				cata_id: 0,
				arrowRecord: 0,
				//tabs
				tabsList: [{
						name: "Recommend",
					},
					{
						name: "Sale Count",
						key: "sales",
						arrowRecord: 0,
					},
					{
						name: "Price",
						key: "price",
					},
					// {
					//   name: "筛选",
					// },
				],
				arrowRecord: 0, //sort
				isAction: "isAction",
				current: 0,
				//info
				goodsList: [],
				keywords: "",
				goodsParams: {
					pageIndex: 1,
					pageSize: 10,
					keywords: undefined,
					categoryId: undefined
				},
			};
		},
		onLoad({ cata_id, keywords }) {
			if (cata_id) this.goodsParams.categoryId = cata_id;
			if (keywords) this.keywords = this.goodsParams.keywords = keywords;
			this.getGoodList();
		},
		watch: {
			current() {
				this.goodsList = [];
				this.arrowRecord = 0;
				this.getGoodList();
			},
		},
		watch: {
			current() {
				this.goodsList = [];
				this.arrowRecord = 0;
				this.getGoodList();
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.getGoodList();
		},
		methods: {
			//
			showToast() {
				this.$refs.uToast.show({
					title: "价格区间填写错误",
					type: "warning",
				});
			},
			selectToSearch(item) {
				this.keywords = item;
				this.goodsParams.cata_id = "";
				this.goodsParams.keywords = item;
				this.getGoodList();
			},
			reset() {
				this.value1 = this.value2 = "";
			},
			submit() {
				if (this.value2 < this.value1) return this.showToast();
				this.getGoodList();
				this.hide();
			},

			tabsClick(item, index) {
				this.current = index;
				if (!item.key) return;
				if (item.key === "price") {
					this.arrowRecord += 1;
					this.arrowRecord > 2 ? (this.arrowRecord = 1) : "";
				}
				this.goodsParams.sortKey = item.key;
				this.goodsParams.sortType =
					item.arrowRecord || ["DESC", "ASC"][this.arrowRecord];
				this.getGoodList();
			},
			valChange(val) {
				this.value1 += val;
			},
			valChange2(val) {
				this.value2 += val;
			},
			backspace() {
				if (this.value1.length)
					this.value1 = this.value1.substr(0, this.value1.length - 1);
			},
			backspace2() {
				if (this.value2.length)
					this.value2 = this.value2.substr(0, this.value2.length - 1);
			},
			//popup
			show() {
				this.$refs.screen_modal.show();
			},
			hide() {
				this.$refs.screen_modal.hide();
			},

			async getGoodList() {
				let {
					success,
					data,
				} = await this.$get("/goods/client-list", this.goodsParams);
				if (!success) return this.$msg("error")
				if (this.pageIndex === 1) this.goodsList = []
				if (data.rows.length)
					this.goodsList = this.goodsList.concat(data.rows)
			},
			onRearchBottom() {
				this.pageIndex++
				this.getGoodList()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btn_wrap {
		width: 80vw;
		padding: 2vh 0;
		border-top: 1px solid #dbdbdb;
		position: fixed;
		bottom: 0px;

		uni-button {
			width: 36vw;
		}
	}

	.c_wrap {
		background-color: white;
		height: 6vh;
		line-height: 6vh;

		.tabs_wrap {
			padding: 0;
			margin: 0;
			list-style: none;

			.tab-item {
				flex: 1;
				border-bottom: 6rpx solid transparent;

				&.isAction {
					color: $main-color;
					font-weight: bold;
					border-bottom: 6rpx solid $main-color !important;
				}
			}
		}
	}

	.collapse-item {
		color: red;
		padding-bottom: 10px;
	}

	.sub_item {
		font-size: 10px;
		width: 19.5vw;
		height: 3vh;
		line-height: 3vh;
		background-color: #999;
		color: white;
		border-radius: 8px;
		margin-top: 10px;
	}

	.u-collapse-body {
		height: 100%;
	}

	.u_input_bc {
		background-color: #dbdbdb;
		width: 30vw;
		border-radius: 2vw;
	}

	.item-info {
		height: 100%;

		.title {
			line-height: normal;
		}

		.demo-tag-owner {
			background-color: #c33;
			color: #ffffff;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
			font-size: 20rpx;
			line-height: 1;
		}

		.demo-tag-text {
			border: 1px solid #c33;
			color: #c33;
			margin-left: 10px;
			border-radius: 50rpx;
			line-height: 1;
			padding: 4rpx 14rpx;
			display: flex;
			align-items: center;
			border-radius: 50rpx;
			font-size: 20rpx;
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg,
					rgba(249, 116, 90, 1) 0%,
					rgba(255, 158, 1, 1) 100%);
		}

		.hot-tag {
			width: 60%;
			justify-content: space-around;
		}
	}
</style>
